@mixin card-hover-effect {
  border-radius: 10px; //首页卡片圆角
  box-shadow: 0 0 16px var(--vp-home-list-box-shadow);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 10px 16px -4px var(--vp-c-brand-1);
    transform: translateY(-3px);
    border-radius: 10px; //侧边卡片栏圆角
  }
}

:root {
  --vp-home-list-box-shadow: #ccc;
}

.dark {
  --vp-home-list-box-shadow: #c3c3c3;
}
// 列表卡片悬停效果
.tk-post-item {
  @include card-hover-effect;
}
// 卡片栏悬停效果
.tk-page-card {
  @include card-hover-effect;
}
// card卡片悬停效果
.tk-post-item-card {
  @include card-hover-effect;
}

// 定义变量
$white: #ffffff;
$circle-height: 465px;
$icons-margin-top: 10px;

// 圆形背景
.is-circle-bg {
  height: $circle-height; // 首页卡片栏博主信息高度
}

.tk-my__icons {
  margin-top: $icons-margin-top; //首页卡片栏博主信息社交图标位置
  color: $white; //首页卡片栏作者信息社交图标颜色
}

// 首页卡片栏博主信息
.tk-my__blogger {
  .name,
  .slogan {
    color: $white; // 博主名称和标语颜色
    display: flex; // 水平居中
    justify-content: center; // 水平居中
  }
}

.tk-my__avatar {
  // 首页卡片栏博主信息头像
  margin-top: 220px;
  margin-bottom: 20px;
}

.tk-post-item-card__cover-img {
  height: 185px; // 封面图高度
}
